ext4.0简单表格 |
您所在的位置：网站首页 › extjs gridpanel › ext4.0简单表格 |
ext4.0简单表格
|
ext4.0简单表格-Ext.grid.Panel
转载
whuissaxl 2013-01-15 16:28:42 博主文章分类：JS ©著作权 文章标签 表格 ext4.0 Ext.grid.Panel 文章分类 其他 前端开发 ext4.0简单表格-Ext.grid.Panelhttps://blog.51cto.com/issaxl/1118794 Ext.require(["Ext.grid.*", "Ext.data.*"]); Ext.onReady(function() { Ext.QuickTips.init(); Ext.define("MyData", { extend : "Ext.data.Model", fields : ["id", { name : "id", mapping : "id" }, { name : "username", mapping : "username" }, { name : "sex", type : "int" }, { name : "createDate", mapping : "createDate", type : "date", dateFormat : 'Y-m-d H:i:s' }, { name : "registDate", type : "date", dateFormat : 'Y-m-d H:i:s', mapping : "registDate" }] }); var pageSize = 10; var store = Ext.create("Ext.data.Store", { model : "MyData", proxy : { type : "ajax", url : "admin_infos.do", reader : { type : "json", root : "items" } }, autoLoad : true }); var grid = Ext.create("Ext.grid.Panel", { store : store, selType : 'checkboxmodel', selModel : { mode : 'id', // or SINGLE, SIMPLE ... review API for // Ext.selection.CheckboxModel checkOnly : false // or false to allow checkbox selection on click anywhere in row }, layout : "fit", columns : [{ text : "用户名", width : 200, dataIndex : "username", sortable : true, renderer : function change(val) { return '' + val + ''; } }, { text : "性别", flex : 1, width : 100, dataIndex : "sex", sortable : false, renderer : function(v) { if (v == 1) { return "男"; } else { return "女"; } } }, { text : "创建日期", width : 200, dataIndex : "createDate", sortable : true, renderer : Ext.util.Format.dateRenderer('Y-m-d') }, { text : "注册日期", width : 200, dataIndex : "registDate", sortable : true, renderer : Ext.util.Format.dateRenderer('Y-m-d') }, { text : '操作', xtype : 'actioncolumn', width : 50, items : [{ icon : 'totosea/p_w_picpaths/delete.gif', // Use a URL in the // icon config tooltip : '删除管理员', iconCls : 'delete', handler : function(grid, rowIndex, colIndex) { var rec = store.getAt(rowIndex); function showResult(btn) { if (btn == 'yes') { Ext.Ajax.request({ url : 'admin_delete.do', params : { id : rec.get("id") }, method : 'POST', callback : function(options, success, response) { if (success) { var responseJson = Ext.JSON .decode(response.responseText); Ext.Msg.alert("提示信息", responseJson.msg); store.load({ params : { start : 0, limit : pageSize } }); } else { Ext.Msg.confirm('失败', '请求超时或网络故障,错误编号：[' + response.status + ']是否要重新发送？', function(btn) { if (btn == 'yes') { Ext.Ajax .request(options); } }); } } }); } } Ext.MessageBox.confirm('提示信息', '真的要删除一个管理员么?', showResult); } }] }], height : 400, width : 800, x : 120, y : 40, title : "用户信息", renderTo : "admindata", trackMouseOver : true, // 鼠标特效 autoScroll : true, stateful : true, stateId : 'stateGrid', viewConfig : { columnsText : "显示/隐藏列", sortAscText : "正序排列", sortDescText : "倒序排列", forceFit : true, stripeRows : true }, bbar : new Ext.PagingToolbar({ store : store, // 数据源 pageSize : pageSize, displayInfo : true, displayMsg : '当前记录 {0} -- {1} 条 共 {2} 条记录', emptyMsg : "暂无数据显示", prevText : "上一页", nextText : "下一页", refreshText : "刷新", lastText : "最后页", firstText : "第一页", beforePageText : "当前页", afterPageText : "共{0}页" }), tbar : // 工具条 [{ text : '刷新', cls : 'refresh', handler : function(btn, pressed) {// 重置查询条件 store.load({ params : { start : 0, limit : pageSize } }); } }] }); }); /** * 删除一个用户 */ public void delete() { String id = this.servletRequest.getParameter("id"); this.service.removeObject(AdminUser.class, id); JSONObject jsono = new JSONObject(); jsono.put("msg", "删除成功"); JsonResult.json(jsono.toString(), servletResponse); } My JSP 'admin.jsp' starting page .bold:hover{ cursor: pointer; } .x-grid-row-over .x-grid-cell-inner { font-weight: bold; } .delete:hover{ CURSOR: pointer; }
转载自：http://www.cnblogs.com/tatame/archive/2012/04/28/2475391.html 赞 收藏 评论 分享 微博 QQ 微信上一篇：ExtJS专题-表格面板实例(1) 下一篇：JavaScript常用特效收集 |
【本文地址】